Ext.onReady(function(){
	Ext.create('Ext.container.Viewport', {
		renderTo: Ext.getBody(),
		layout: 'border',
		items: [{
			region: 'north',
			html: '<h1 class="x-panel-header">Page Title</h1>',
			autoHeight: true,
			border: false,
			margins: '0 0 5 0'
		}, {
			region: 'west',
			collapsible: true,
			title: 'Navigation',
			width: 150,
			items: [accordion]
		}, {
			region: 'south',
			title: 'South Panel',
			collapsible: true,
			html: 'Information goes here',
			split: true,
			height: 100,
			minHeight: 100
		}, {
			region: 'east',
			title: 'East Panel',
			collapsible: true,
			split: true,
			width: 150
		}, {
			region: 'center',
			xtype: 'tabpanel', // TabPanel itself has no title
			activeTab: 0,      // First tab active by default
			items: {
				title: 'Default Tab',
				html: 'The first tab\'s content. Others may be added dynamically'
			}
		}]
	});
});

var accordion = Ext.create('Ext.panel.Panel', {
	title: 'Accordion Layout',
	width: 150,
	height: 150,
	layout: 'accordion',
	layoutConfig : {
		titleCollapse: false,
		animate : true,
		activeOnTop: true
	},
	items: [{
		title: 'Panel 1',
		html: 'Panel Content 1'
	},{
		title: 'Panel 2',
		html: 'Panel content 2'
	}]
});